import React from "react"
import Taro from "@tarojs/taro"
import { ArrowRight } from "@taroify/icons"
import GpContainer from "@/components/GpContainer"
import GpExplainColumn from "@/components/GpExplainColumn"
import { Image, Navigator, Text, View } from "@tarojs/components"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpTabbar from "@/components/GpTabbar"
import { getExplainList } from "@/apis/index"
import { pageMapper } from "@/constants/pageMap"
import { makePagePath } from "@/utils/router"
import { setPageMeta } from "@/utils/common"
import clsx from "clsx"

const ports = [{ text: "专业解读" }]
const arrowSize = Taro.pxTransform(12)
type IState = {
  list: IApiRelative.IGetExplainList.IExplainListItem[]
}
class InstitutionRank extends React.Component<unknown, IState> {
  constructor(props) {
    super(props)
    this.state = {
      list: []
    }
  }
  onLoad() {
    this.getData()
  }
  onShareAppMessage() {}
  componentDidShow() {
    this.setPageInfo()
  }
  setPageInfo = () => {
    setPageMeta({
      keywords: "艺考专业前景，艺考专业解读",
      title: "艺考有哪些专业-艺考有哪些科目-择艺宝",
      description:
        "择艺宝为你整理八大类艺考专业相关信息，其中包含美术类、音乐类、舞蹈类、表演类、播音主持类、摄影类、书法类、编导类等介绍。"
    })
  }
  getData = () => {
    Taro.showLoading()
    getExplainList()
      .then(res => {
        if (res.data.success) {
          const _list = res.data.data || []
          _list.forEach(l => {
            l.url = makePagePath(pageMapper.proSpecificExplain, { id: l.id })
          })
          this.setState({
            list: _list
          })
        }
      })
      .finally(() => {
        Taro.hideLoading()
      })
  }
  /** 顶部卡片 */
  renderCards = () => {
    return (
      <View className="bg-hex-fff pt-37px pb-40px px-30px">
        <GpExplainColumn />
      </View>
    )
  }
  renderList = () => {
    const { list } = this.state
    const len = list.length
    return (
      <View className="px-30px py-40px bg-hex-fff mt-20px">
        <View className="flex flex-col">
          {/* item for loop */}
          {list.map((l, index) => (
            <Navigator
              hoverClass="none"
              url={l.url}
              className={clsx("block", {
                "mb-48px": index !== len - 1
              })}
              key={index}
            >
              <View className="flex flex-row items-start">
                <Image
                  src={l.picture}
                  className="w-220px h-146px rounded-10px inline-block flex-none"
                  mode="aspectFill"
                />
                <View className="inline-block ml-24px">
                  <View className="yahei-bold font-bold text-30px text-hex-2c2c35">
                    <Text>{l.name}</Text>
                  </View>
                  <View className="yahei font-normal text-24px leading-24px text-hex-faab10 mt-13px">
                    <Text>就业方向 | 报考相关 | 学习资料 | 推荐院校</Text>
                  </View>
                  <View className="yahei font-normal text-26px text-hex-666 mt-10px break-all leading-40px relative h-75px">
                    <Text>
                      {l.introduce.length > 20 ? `${l.introduce.slice(0, 20)}...` : l.introduce}
                    </Text>
                    <View className="yahei font-normal text-24px text-hex-b8b8bf absolute right-0 bottom-0">
                      详情 {">"}
                      {/* <ArrowRight
                      color="#b8b8bf"
                      style={{
                        fontSize: arrowSize
                      }}
                    /> */}
                    </View>
                  </View>
                </View>
              </View>
            </Navigator>
          ))}
        </View>
      </View>
    )
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  render(): React.ReactNode {
    return (
      <GpContainer>
        <View>
          {/* 顶部卡片 */}
          {this.renderCards()}
          {/* 列表 */}
          {this.renderList()}
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          {/* 当前位置 */}
          <GpCurrentPort ports={ports} />
        </View>
        {/* 底部导航 */}
        <GpTabbar type={13} />
      </GpContainer>
    )
  }
}
export default InstitutionRank
